<!doctype html> 
<html lang="en">
	<head>
		<meta charset="utf-8">
		<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
		<title>作品集首页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<link rel="stylesheet" type="text/css" media="screen" href="/css/CSSreset.min.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="/css/divas_instructions_style.css" />
		<link id="skin" rel="stylesheet" type="text/css" media="screen" href="/css/divas_free_skin.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="/css/content.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="/css/prism.css" />
        <script type="text/javascript" src="/js/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="/js/jquery.divas-1.0.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function()
			{
				$("#slider").divas({
					slideTransitionClass: "divas-slide-transition-left",
					titleTransitionClass: "divas-title-transition-left",
					titleTransitionParameter: "left",
					titleTransitionStartValue: "-999px",
					titleTransitionStopValue: "0px",
					wingsOverlayColor: "rgba(0,0,0,0.6)"
				});
			});
		</script>
		<style type="text/css">
			.nav{
				float:right;
			}
			.nav li{
				float:left;
			}
			.nav .logo{
				float:left;
			    position: absolute;
			    left: 0px;
			}
			.nav a{
				display: block;
				/*border: 1px red solid;*/
				line-height: 60px;
				padding: 0 32px;
				position: relative;
			}
			.nav li span{
				height:2px;
				width:0;
				background-color: #E42ACC;
				position: absolute;
				left:0;
				bottom:-1px;
				opacity: 0;
				margin: 0 32px;
				transition: .6s;
			}
			.nav a:hover{
				color:#F94206;
			}
			.nav a:hover span{
				width:calc(100% - 64px);
				opacity: 1;
			}
			@media screen and (max-width: 768px) {
				.nav a {
 				   display: block;
				    line-height: 20px;
				    padding: 0px 5px;
				    position: relative;
				}
			}
		</style>
	</head>
	<body>
		<header>
			<div>
				<ul class="nav">
					<li class="logo"><a href="#" title="Instructions"><img src="/img/logo.png"/></a></li>
					<li><a href="/index">首页<span></span></a></li>
					<li><a href="/huihui/sjzp" starget="_self">设计作品<span></span></a></li>
					<li><a href="#">给我留言<span></span></a></li>
				</ul>
			</div>
		</header>
		<section id="slider_wrapper">
			<div id="slider" class="divas-slider">
				<ul class="divas-slide-container">
		           <li class="divas-slide"><img src="/img/placeholder.gif" alt="" data-src="/img/slider/1.jpg" data-title="<h1>Divas Slider</h1><p>Title is visible only if you use the attribute 'data-title' of your image</p>"/></li>
		           <li class="divas-slide"><img src="/img/placeholder.gif" alt="" data-src="/img/slider/2.jpg" data-title="<h1>Divas Slider</h1><p>Gives you the full freedom of clickable /img</p>" /></li>
		           <li class="divas-slide"><img src="/img/placeholder.gif" alt="" data-src="/img/slider/3.jpg" data-title="<h1>Divas Slider</h1><p>Images use lazy loading via deferred object</p>"/></li>
		           <li class="divas-slide"><img src="/img/placeholder.gif" alt="" data-src="/img/slider/4.jpg" data-title="<h1>Divas Slider</h1><p>You can style it as you wish via CSS</p>"/></li>
		           <li class="divas-slide"><img src="/img/placeholder.gif" alt="" data-src="/img/slider/5.jpg" data-title="<h1>Divas Slider</h1><p>Uses CSS3 transitions or jQuery.animate() as a fallback</p>" /></li>
		           <li class="divas-slide"><img src="/img/placeholder.gif" alt="" data-src="/img/slider/6.jpg" data-title="<h1>Divas Slider</h1><p>You can set up almost any slider style your desire</p>" /></li>
		           <li class="divas-slide"><img src="/img/placeholder.gif" alt="" data-src="/img/slider/7.jpg" data-title="<h1>Divas Slider</h1><p>Gives you extensive documentation and friendly support</p>" /></li>
			    </ul>
			    <div class="divas-navigation">
			        <span class="divas-prev">&nbsp;</span>
			        <span class="divas-next">&nbsp;</span>
			    </div>
                <div class="divas-controls">
                	<span class="divas-start"><i class="fa fa-play"></i></span>
			        <span class="divas-stop"><i class="fa fa-pause"></i></span>
                </div>
			</div>
		</section>
		<a href="http://www.beian.miit.gov.cn">鄂ICP备19005823号</a>
</body>
</html>